<template>
  <view class="circle-friends">
    <view class="circle-cover">
<!--      <u-swiper-->
<!--        :list="[bannerList[0]]"-->
<!--        height="460rpx"-->
<!--        indicator-->
<!--        indicatorMode="dot"-->
<!--      ></u-swiper>-->
<!--      <div class="share-btn">-->
<!--&lt;!&ndash;        <u-icon name="share" color="#fff" size="44rpx"></u-icon>&ndash;&gt;-->
<!--        <button class="button" open-type="share"><img src="/static/images/share.png" style="width: 48rpx;height: 48rpx"/>分享相册</button>-->
<!--      </div>-->
      <image :src="bannerList[0].url" mode="aspectFill" style="width: 100%"/>
      <view class="album-avatar">
        <span class="name">乐中土特产</span>
        <image
          src="/static/images/avatar.jpg"
          style="width: 110rpx; height: 110rpx"
          @click="toPath('/pages/mine/mine')"
        ></image>
      </view>
      <div class="sign">
        点击头像联系客服
        <image
          src="/static/images/pointer.png"
          style="width: 30rpx; height: 30rpx"
        ></image>
      </div>
    </view>
    <view class="circle-content">
      <view class="album-list">
        <view
          class="album-item"
          v-for="(item, index) in albumList"
          :key="index"
        >
          <view class="album-avatar">
            <image
              src="/static/images/avatar.jpg"
              style="width: 80rpx; height: 80rpx; border-radius: 50%"
            ></image>
          </view>
          <view class="album-content">
            <view
              class="album-info"
              @click="toPath('/pages/detail/detail?index=' + index)"
            >
              <view class="name">
                <u-text :text="item.name" type="primary" size="14"></u-text>
                <u-icon name="arrow-right"></u-icon>
              </view>
              <u-text margin="10rpx 0 10px 0;" :text="item.urls.map(e => e.title).join('、')"></u-text>
            </view>
            <u-album :urls="item.urls.map(e => e.url)" :multipleSize="'190rpx'"></u-album>
          </view>
        </view>
      </view>
      <u-loadmore status="nomore" nomore-text="没有更多了" line />
    </view>
  </view>
</template>

<script>
import { bannerList, albumList } from "@/config/album-free";
export default {
  data() {
    return {
      bannerList,
      albumList,
    };
  },
  onShareAppMessage() {
    return {
      title: '您的好友向您分享了一本相册',
      imageUrl: bannerList[0],
      path: 'pages/home/home'
    }
  },
  methods: {
    toPath(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss">
.circle-friends {
  .circle-cover {
    position: relative;
    .share-btn {
      position: absolute;
      left: 20rpx;
      top: 20rpx;
      z-index: 1000;
      .button {
        display: flex;
        align-items: center;
        background: none;
        border: none;
        color: #fff;
        &::after {
          border: none;
        }
      }
    }
    .album-avatar {
      position: absolute;
      right: 40rpx;
      bottom: -30rpx;
      display: flex;
      .name {
        margin: 20rpx;
        color: #fff;
      }
    }
    .sign {
      position: absolute;
      right: 40rpx;
      bottom: -80rpx;
      font-size: 22rpx;
      color: #8f9ca2;
      display: flex;
      align-items: center;
    }
  }
  .circle-content {
    background: #fff;
    padding: 40rpx 30rpx;
    margin-top: 60rpx;
    .ambassador {
      display: flex;
      align-items: center;
      margin: 20rpx 0;
    }
    .album-list {
      .album-item {
        @include flex;
        align-items: flex-start;
        margin-bottom: 30rpx;
        .album-avatar {
          overflow: hidden;
        }
        .album-content {
          margin-left: 14rpx;
          flex: 1;
          padding-bottom: 30rpx;
          border-bottom: 1px solid rgb(230, 232, 235);
          .album-info {
            margin-bottom: 10rpx;
            .name {
              display: flex;
              justify-content: flex-start;
            }
          }
        }
      }
    }
  }
}
</style>
